<!--维保四个模块>任务完成时间线-->
<template>
	<div class="page maintainDetailTimeLine-page" data-page="maintainDetailTimeLine" style="z-index: 2">
		<div class="link-page-nav">
			<a href="#" class="link" @click=$root.backToTab()>
				<i class="iconfont icon-zuo"></i>
			</a>
		</div>
		<div class="link-page-top">
			<div class="link-page-title">任务完成时间线</div>
		</div>

		<div class="page-content infinite-scroll-content">
			<div class="clockIn-page-top">
				<!-- Timeline -->
				<div class="timeline timeline-top" id="timeLineList_{{getNewId}}" style="margin-bottom: 100px!important;">

				</div>
			</div>
		</div>
	</div>
</template>

<script>
	return {
		mounted() {
			var self = this;
			self.taskId = this.$route.params.taskId;
			self.taskType = this.$route.params.taskType;
		},
		data: function () {
			return {
				getNewId: (new Date()).getTime()
			}
		},
		methods: {
			getTaskDetailDoTimeTree: function () {
				var self = this;
				Dao.getTaskDetailDoTimeTree({
					taskId: self.taskId,
				}, function (data) {
					if (data && data != null && JSON.stringify(data) != "{}") {
						Object.keys(data).sort().reverse().forEach(key=>{
							var value = data[key];//获取对应的value值
							//var beforePics = value.beforePics.split(",");// 维保前图片
							//var afterPics = value.afterPics.split(",");// 维保前图片
							var isHide = "";
							if (self.taskType == 4) {
								isHide = " style='display:none;' ";
							}
							let assetsNameList=common.transNullundefined(value.assetsNameList)
							$("#timeLineList_" + self.getNewId).append(`
            				<div class="timeline-item">
		           			    <div class="timeline-item-divider" style="margin-right: 10px;"></div>
		           			    <div class="timeline-item-content" style="width: 100%;margin-right:12px;">
		           			    	<div class="timeline-item-title timeLineTitle">`+ key + `</div>
		           			    	<div class="timeline-item-text" `+ isHide + `>资 &nbsp;产 &nbsp;数 <span class="assetsSum">` + value.completeAssetsCount + `</span></div>
		           				    <div class="timeline-item-text">责 &nbsp;任 &nbsp;人  <span class="ownerName">`+ value.accountName + `</span></div>
		           				    <div class="timeline-item-text" `+ isHide + `>完成内容 <span class="taskContent">` + assetsNameList + (assetsNameList?';':'') + common.transNullundefined(value.buildingNameList) + `</span></div>
		           				 	<div class='timeline-item-text' id="timeline-images`+ (key + '_' + self.getNewId) + `"></div>
		           				 <div class="timeline-item-text" style="margin-top: 15px !important;border-top: 1px solid rgba(225, 225, 225, 0.5);"></div>
		           			    </div>
	           			 	</div>
           			    `);

							$("#timeline-images" + (key + '_' + self.getNewId)).empty();
							//展示图片
							showImage(jQuery("#timeline-images" + (key + '_' + self.getNewId)), value.beforePics + "," + value.afterPics.toString(), 4);
						})
						$("#timeLineList_" + self.getNewId).append(`
		           			<div class="timeline-item">
		     			    	<div class="timeline-item-divider" style="margin-right: 10px;"></div>
		     			  	</div>
          			`);
					} else {
						$("#timeLineList_" + self.getNewId).append(`<div class="no-data-img"><img src="` + listNoDataPic() + `"/></div>`);
					}
				});
			}
		},
		on: {
			pageInit: function (e, page) {
				var self = this;
				var $ = self.$;
				self.getTaskDetailDoTimeTree();

			},
		}
	}
</script>
<style>
	.timeline-item-divider:after,
	.timeline-item-divider:before {
		height: 5000vh !important;
	}
</style>